{% extends 'web_base.html' %}
{% load staticfiles %}


{% block title %}
    {{ user.name }}的购物车
{% endblock %}
{% block css_js %}
    <link rel="stylesheet" href={% static "css/cart.css" %}>

{% endblock %}


{% block web_body %}
    <div class="container">
        <div class="main">
            <form action="{% url 'orders:order' %}" method="post">
                {% csrf_token %}

                <div class="col-lg-8 col-md-8">
                    <div class="main">
                        <table class="table">

                            <thead>
                            <tr>
                                <th style="text-align: left">商品</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>合计</th>
                                <th class="text-right">选择</th>
                            </tr>
                            </thead>
                            <tbody class="tb">


                            {% for goods in goods_list %}
                                <tr>
                                    <td class="goods"><i class="glyphicon glyphicon-remove-circle"></i>
                                        <img src={{ goods.image.url }} alt="{{ goods.name }}"><span>{{ goods.name }}</span>
                                    </td>
                                    <td class="price">{{ goods.price }}元</td>
                                    <td>
                                        <div class="quantity">
                                            <input type="button" value="-" class="previous">
                                            <input type="text" class="count" goods_id="{{ goods.id }}"
                                                   value="{{ goods.count }}">
                                            <input type="button" value="+" class="next">
                                        </div>
                                    </td>
                                    <td class="amount">{{ goods.amount }}元</td>
                                    <td>
                                        <input type="checkbox" name="goods_id" value="{{ goods.id }}">
                                        {# 在表单中checkebox 会只提交选中的值 一定要将值写到checkbox离面 #}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    还没有加入，赶快挑选自己的宝贝吧

                                </tr>
                            {% endfor %}


                            </tbody>

                        </table>
                        <div class="tol">
                            全选:<input type="checkbox" class="checkAll">
                        </div>

                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="pay">
                        <h3>购物总计</h3>
                        <h4 class="total_price">¥0</h4>
                        <h4 class="total_count">共0件</h4>
                        <input type="submit" class="btn btn-primary btn-lg btn-block" value="提交订单"/>
                    </div>
                </div>
            </form>

        </div>
    </div>
{% endblock %}
{% block end_js %}
    <script>
        $(function () {
            var chekAll = $('.checkAll');

            var tb = $('.tb');
            var total_count = $('.total_count');
            var total_price = $('.total_price')
            var checks = tb.find('input:checkbox');
            var prev = $('.previous');
            var next = $('.next');
            var txt = $('.count')
            var dels = $('.glyphicon-remove-circle')



            function update_page() {
                var total_c = 0;
                var total_p = 0;
                tb.find(':checked').each(function () {
                    total_c += parseInt($(this).parents('tr').find('.count').val());
                    total_p += parseFloat($(this).parents('tr').find('.amount').text());
                });
                total_count.text('共' + total_c + '件');
                total_price.text('¥' + total_p);
            }

            function accout(obj) {
                c = parseInt(obj.parent().children('.count').val());
                p = parseInt(obj.parents('td').siblings('.price').text());
                obj.parents('td').siblings('.amount').text((p * c).toFixed(2) + '元')
            }


            chekAll.click(function () {
                is_check = $(this).prop('checked');
                checks.each(function () {
                    $(this).prop('checked', is_check)
                });
                update_page()
            });
            checks.click(function () {
                alen = tb.find('tr').length;
                clen = tb.find(':checked').length;

                if (alen == clen) {
                    chekAll.prop('checked', true)
                } else {
                    chekAll.prop('checked', false)
                }
                update_page()

            });

            next.click(function () {
                goods_id = $(this).prev().attr('goods_id');
                count = parseInt($(this).prev().val()) + 1;
                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                context = {
                    'goods_id': goods_id,
                    'count': count,
                    'csrfmiddlewaretoken': csrf
                };
                that = $(this);
                $.post('/computer/cart/cart_update/', context, function (data) {

                    if (data.res == 4) {
                        that.siblings('.count').val(count)
                        accout(that);
                        update_page()
                    } else {
                        alert(data.errmsg)
                    }
                });


            });
            prev.click(function () {
                goods_id = $(this).next().attr('goods_id');
                count = parseInt($(this).next().val()) - 1;
                if (count <= 0)
                    count = 1;
                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                context = {
                    'goods_id': goods_id,
                    'count': count,
                    'csrfmiddlewaretoken': csrf
                };
                that = $(this);
                $.post('/computer/cart/cart_update/', context, function (data) {
                    if (data.res == 4) {
                        that.siblings('.count').val(count)
                        accout(that);
                        update_page()
                    } else {
                        alert(data.errmsg)
                    }
                });


            });


            prev_num = txt.val();
            txt.focus(function () {
                prev_num = txt.val();
            });

            txt.blur(function () {
                goods_id = $(this).attr('goods_id');
                count = $(this).val();
                if (count < 0 || isNaN(count) || count.trim().length == 0)
                    txt.val(prev_num)
                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                context = {
                    'goods_id': goods_id,
                    'count': parseInt(count),
                    'csrfmiddlewaretoken': csrf
                };
                that = $(this);
                $.post('/computer/cart/cart_update/', context, function (data) {
                    if (data.res == 4) {
                        accout(that);
                        update_page()
                    } else {
                        alert(data.errmsg)
                        txt.val(prev_num)
                    }
                });


            })

            dels.click(function () {
                goods_id = $(this).parents('tr').find('.count').attr('goods_id')
                csrf = $('input[name="csrfmiddlewaretoken"]').val();
                context = {
                    'goods_id': goods_id,
                    'csrfmiddlewaretoken': csrf
                };
                that = $(this)
                $.post('/computer/cart/cart_del/', context, function (data) {
                    if (data.res == 3) {
                        that.parents('tr').remove();
                        update_page()
                    } else {
                        alert(data.errmsg)
                    }
                })
            })


        })


    </script>
{% endblock %}
  




       




